DAMN = (typeof DAMN != "undefined")?  DAMN : {};

DAMN.Tags = new function() 
{   
  this.AttachTo = function(parent) {
    parent.tabs('add', '#tabs-Tags', "Tags");
    this.tab = $("#tabs-Tags");

    var pa = $('<div class="container">\
                  <div class="content row" style="height: 30%;">\
                    <div class="content">Applied tags</div><div class="list"><div id="tagstop"></div></div>\
                  </div>\
                  <div class="content row" style="height: 50%;">\
                    <div class="content"  style="margin-bottom:4px;">\
                    <div style="position: relative; margin-top:4px; margin-bottom:4px;"> \
                      <input id="tagsearch" name="search" style="width:99%;" class="ui-widget ui-state-default ui-widget-header"/> \
                      <span style="position: absolute; top: 0; right: 0; margin-right: 5px; cursor: pointer;" class="ui-icon ui-icon-search"></span> \
                    </div> </div>\
                    <div class="list" style="height: 68%;"><div id="tagsbot"></div></div>\
                  </div>\
                </div>');
    this.tab.css('height', '100%');
    this.tab.append(pa);
    
    pa.find('.content').addClass('ui-widget ui-widget-content');
    
    this.top = $("#tagstop");
    this.bot = $("#tagsbot");
    
    DAMN.AssetMananger.Register("asset", this.Tags.bind(this));
    
    /*
    parent.bind('tabsselect', function(event, ui) {
      if ($("#tabs-Tags").equals($(ui.panel))) {
        DAMN.eastLayout.close("north");
      }
      else {
        DAMN.eastLayout.open("north");
      }
    });
    */
    
    var BOT = this.bot;
    $.getJSON("/tags/", function(data) {
      BOT.empty();
      
      var cdiv = null;
      var category = null;
      for(m in data){
        if (category != data[m].category) {
          category = data[m].category;
          cdiv = $('<div><table style="width:100%;"><tr><td style="width:0; padding-right: 0.25em;">'+category+'</td><td><div style="margin-bottom: 0.25em; width: 100%; height:1px; background-color:white;"/></td></tr></table></div>'); 
          BOT.append(cdiv);
        }
        cdiv.append($('<p tag="'+data[m].id+'">' + data[m].type + '<span class="add_tag ui-icon ui-icon-plusthick"></span></p>'));
      }
      
      $("#tagsearch").keyup(function () {
        var filter = $(this).val(), count = 0;
        $("#tagsbot p[tag]").each(function () {
            if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                $(this).hide();
                $(this).addClass('tag-search-hidden');
            } else {
                $(this).show();
                $(this).removeClass('tag-search-hidden');
                $(this).parent().show();
                count++;
            }
        });
        
        BOT.children('div').each(function () {
          var hidden = $(this).children('p.tag-search-hidden').length;
          var shown = $(this).children('p').length;
          //DAMN.Log.debug("BLAH 1: "+hidden);
          //DAMN.Log.debug("BLAH 2: "+shown);
          if (hidden == shown){
             $(this).hide();
          }
        });
        //$("#tagsearch-count").text(count);
      });

  	});
  	
  	var self = this;
  	
  	
  	$('.add_tag').live('click', function() {
      if (DAMN.AssetMananger.selected.length == 1) {
        var assetId = DAMN.AssetMananger.selected[0].attr("assetid");
        var tagId = $(this).parent().attr("tag");
        DAMN.Log.debug("PRESSED add_tag "+assetId+', '+tagId);
        $.post('/assets/'+assetId+'/tags/add/', {'tagType':tagId}, function(data, textStatus, XMLHttpRequest) {
          DAMN.Log.debug("add_tag: "+data+', '+textStatus+', '+XMLHttpRequest.status);
          if (textStatus=='success') {
            self.Refresh(assetId, self.top);
          }
        });
      }
		});
		
		$('.remove_tag').live('click', function() {
        var assetId = $(this).parent().attr("assetid");
        var tagId = $(this).parent().attr("tag");
        DAMN.Log.debug("PRESSED remove_tag "+assetId+', '+tagId);
        $.post('/assets/'+assetId+'/tags/remove/', {'tagType':tagId}, function(data, textStatus, XMLHttpRequest) {
          DAMN.Log.debug("remove_tag: "+data+', '+textStatus+', '+XMLHttpRequest);
          if (textStatus=='success') {
            self.Refresh(assetId, self.top);
          }
        });
		});
		
	};
	
	this.Refresh = function(id, target) 
	{
	   $.getJSON("/assets/"+id+"/tags/", function(data){
        var html = "";                               
        for(m in data){
          html += '<p assetid="'+id+'" tag="'+data[m].id+'">' + data[m].type + '<span class="remove_tag ui-icon ui-icon-closethick"></span></p>';
        }
        target.html(html);
      });
  };

	
	this.Tags = function(op, el) 
  {   
    var BOT = this.bot;
    var TOP = this.top;
    TOP.empty();
    if (op == 'SELECT') { 
      if (DAMN.AssetMananger.selected.length == 1) {
        this.Refresh(el.data("assetid"), TOP);
      }
      else {
       TOP.append("<p>Multiple selected."+DAMN.AssetMananger.selected.length+"</p>");
      }
    }
    else {
      TOP.append("<p>Nothing selected.</p>");
    }
  };
  		
};

